<template>
  <van-popup
    v-model="showSelectPopup"
    @click-overlay="handleClickOverlay"
    :close-on-click-overlay="false"
  >
    <div class="popup-appointment-box">
      <p>{{title}}</p>
      <div class="select-box">
        <div @click="handleCancel">取消</div>
        <div @click="handleAffirm">确认</div>
      </div>
    </div>
  </van-popup>
</template>

<script>
export default {
  name: "",
  props: {
    showSelectPopup: {
      type: Boolean,
      default: false,
    },
    title:{
      type:String,
      default: '您是否确认'
    }
  },
  methods: {
    handleCancel() {
      this.$emit("handleCancel");
    },
    handleAffirm() {
      this.$emit("handleAffirm");
    },
    handleClickOverlay() {
      this.$emit("handleClickOverlay");
    },
  },
};
</script>

<style scoped>
.van-popup {
  border-radius: 10px;
}
.popup-appointment-box {
  display: flex;
  flex-direction: column;
  height: 100px;
  width: 200px;
}
.popup-appointment-box p {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
}
.select-box {
  display: flex;
  height: 50px;
  align-items: center;
  box-shadow: 0 -1px 1px rgba(100, 100, 100, 0.2);
}
.select-box div {
  width: 100px;
  text-align: center;
  height: 50px;
  line-height: 50px;
}
.select-box div {
  font-size: 16px;
  border-right: 1px solid rgba(100, 100, 100, 0.2);
}
</style>